<template>
    <h2>投资管理</h2>
    项目名称：
    <input type="text">
    <button>查询</button>
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>投资项目编号</th>
                <th>投资项目名称</th>
                <th>投资项目总金额</th>
                <th>用户已投资金额</th>
                <th>剩余投资金额</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
        <tr v-for="item in info" :key="item.I_Id">
            <td>{{item.I_Id}}</td>
            <td>{{item.I_Name}}</td>
            <td>{{item.I_Budget}}</td>
            <td>{{item.I_Receive}}</td>
            <td>{{item.I_Residue}}</td>
            <td><button @click="UserRedeem(item.UI_Id)">赎回</button></td>
        </tr>
        </tbody>
    </table>
</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue';
import axios from 'axios';
import { useUserStore } from '../../store/index.ts';
import {useRouter} from 'vue-router'


const userStore = useUserStore()
const router = useRouter()
//
const info = ref([{
    I_Budget:'',
    I_Id:'',
    I_Name:'',
    I_Receive:'',
    I_Residue:'',
    UI_Id:''
}])



onMounted(() => {
    loadData()
})

const loadData = () => {
    axios.get('https://localhost:44387/api/Invests/ShowUserInvestInfo',{
        params:{
            Uid:userStore.UserId
        }
    })
    .then(res=>{
        console.log(res.data)
        info.value = res.data
    })
}

//赎回
const UserRedeem=(UI_Id:any)=>{
    router.push({
        path:'/AddUserRedeem',
        query:{
            UI_Id:UI_Id
        }
    })
}
</script>

